<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction :instruction="instruction"></play-instruction>
    <div class="select-area">
      <box-with-position
        :key="item.id"
        v-for="(item, index) in getCurrentLotteryState"
        :item="item"
        @click="handleUpdateData"
        class="select-row-adjust"
        :class="'p' + (index + 1) "
      ></box-with-position>
    </div>
  </div>
  <div class="number-select-phone" v-else>
    <template v-for="(item, index) in getCurrentLotteryState">
      <div :key="item.id">
        <tail-box :place="item.place.context"></tail-box>
        <lottery-box-flow-phone
          :item="item"
          @click="handleUpdateData"
          :class="'p' + (index + 1)"
          class="select-row-adjust"
        ></lottery-box-flow-phone>
      </div>
    </template>
  </div>
</template>

<script>
import BoxWithPosition from '@/components/lottery-type/common/box-with-position'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxCleanerPhone from '@/components/lottery-type/common/lottery-box-cleaner-phone'
import LotteryBoxFlowPhone from '@/components/lottery-type/common/lottery-box-flow-phone'
import TailBox from '@/components/tail-box/tail-box'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'

export default {
  mixins: [boxWithCleanerMixin],
  components: {
    BoxWithPosition,
    PlayInstruction,
    LotteryBoxCleanerPhone,
    LotteryBoxFlowPhone,
    TailBox
  },
  data() {
    return {
      // 玩法说明
      instruction: '两面',
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .p1 >>> .active
    &.box 
      background rgba($color-p1, 0.102)
      border 1px solid $color-p1
      color $color-p1
      .box-bottom 
        color $color-p1
  .p2 >>> .active
    &.box 
      background rgba($color-p2, 0.102)
      border 1px solid $color-p2
      color $color-p2
      .box-bottom 
        color $color-p2
  .p3 >>> .active
    &.box
      background rgba($color-p3, 0.102)
      border 1px solid $color-p3
      color $color-p3
      .box-bottom 
        color $color-p3
  .p4 >>> .active
    &.box
      background rgba($color-p4, 0.102)
      border 1px solid $color-p4
      color $color-p4
      .box-bottom 
        color $color-p4
  .p5 >>> .active
    &.box
      background rgba($color-p5, 0.102)
      border 1px solid $color-p5
      color $color-p5
      .box-bottom 
        color $color-p5
  .p6 >>> .active
    &.box
      background rgba($color-p6, 0.102)
      border 1px solid $color-p6
      color $color-p6
      .box-bottom 
        color $color-p6
  .p7 >>> .active
    &.box
      background rgba($color-p7, 0.102)
      border 1px solid $color-p7
      color $color-p7
      .box-bottom 
        color $color-p7
  .p8 >>> .active
    &.box
      background rgba($color-p8, 0.102)
      border 1px solid $color-p8
      color $color-p8
      .box-bottom 
        color $color-p8
  .p9 >>> .active
    &.box
      background rgba($color-p9, 0.102)
      border 1px solid $color-p9
      color $color-p9
      .box-bottom 
        color $color-p9
  .p10 >>> .active
    &.box
      background rgba($color-p10, 0.102)
      border 1px solid $color-p10
      color $color-p10
      .box-bottom 
        color $color-p10
  
@media screen and (min-width 750px)
  .select-row-adjust >>> .tail-box  
    width 86px !important
    margin 0 !important
  .select-row-adjust >>> .select-row     
    justify-content flex-start
    .box 
      width 86px
      margin-left 10px
  .select-area 
    box-sizing border-box
    // padding 0 10px
@media screen and (max-width 750px) 
  .number-select-phone >>> .tail-box
    width 45px
    height 24px
    line-height 24px
    margin 10px 0 10px 10px 

</style>